<template>
  <div class='cart'>
    <div class="topfelx">
      <div class="numgoods">共{{total}}件商品</div>
      <div class="changegoods" @click="changetype">{{type?'编辑':'完成'}}</div>
    </div>
    <div class="goodsbox">
      <div class="goodsone" v-for="(item,index) in shoplist" :key="index">
        <div class="goodstop">
          <van-checkbox v-model="item.checked" @click="changecheck(index)"></van-checkbox>
          <div class="phimg">
            <img :src="resourceURL+item.shop.imagesurl" alt="">
          </div>
          <div class="shoptitle">{{item.shop.shop_name}}</div>
          <div class="righticonlink">
            <img src="@/assets/img/rightlink.png" alt="">
          </div>
        </div>
        <van-checkbox-group v-model="item.result">
          <div class="goods" v-for="itema in item.products" :key="itema.cart_id">
            <van-checkbox :name='itema.cart_id' v-if="itema.is_validity" @click="goodscheck(index,itema)" />
            <div class="goodsimg">
              <img :src="resourceURL+itema.imageurl" style="border-radius:10px" alt="">
              <div class="downbox" v-if="!itema.is_validity">已下架</div>
            </div>
            <div class="goodsdex">
              <div class="goodsname" :style="!itema.is_validity?'color:#B2B2B2':''">{{itema.product_name}}</div>
              <div class="goodsAttribute">{{itema.p_s_name}}</div>
              <div class='goodsprice'>
                <div class="price" :style="!itema.is_validity?'color:#B2B2B2':''">￥{{itema.mprice}}</div>
                <van-stepper disable-input @plus='changenum(index,itema,1)' v-model="itema.quantity" @minus='changenum(index,itema,2)' input-width="20px" button-size="20px" />
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </div>
    </div>
    <div class="paybox">
      <!-- <van-checkbox v-model="paychecked">全选</van-checkbox> -->
      <div class="paydes">
        <div class="payprice" v-if="type">合计: <span style="color:#FB2B2C">￥</span><span class="pricenum">{{priceAll}}</span> </div>
        <!-- <div class="payinfo">共减￥4800.00元 查看明细
                    <van-icon name="arrow-up" color="#FB2B2C" style="align-self:center" size="10" />
                </div> -->
      </div>
      <van-button round color="#B60102" style="width:100px" @click="btong">{{type?'结算':'删除'}}({{num}})</van-button>
    </div>
    <van-empty description="购物车为空" v-if="shoplist==''" />
  </div>
</template>

<script>
import { Dialog, Notify, Toast } from "vant";

export default {
  data () {
    return {
      paychecked: false,
      shoplist: [],
      priceAll: "0",
      type: true,
      total: "",
      num: 0,
      resultsumbit: [],
    };
  },
  created () {
    this.getlist();
  },
  methods: {
    changenum (index, i, type) {
      Toast.loading({
        duration: 0,
        forbidClick: true,
        message: "",
      });
      this.$axios
        .post(this.$api.usereditcart, {
          product_id: i.product_id,
          quantity: i.quantity,
          stock_id: i.p_s_id,
        })
        .then((res) => {
          if (res.data.code == 1) {
            if (type == 1) {
              if (
                this.shoplist[index].result.indexOf(
                  i.cart_id
                ) == "-1"
              ) {
                this.shoplist[index].result.push(i.cart_id);
                this.priceAll =
                  (this.priceAll * 1 +
                    i.mprice * i.quantity * 1).toFixed(2);
              } else {
                this.priceAll =
                  (this.priceAll * 1 + i.mprice * 1).toFixed(2);
              }
              if (
                this.shoplist[index].result.length ==
                this.shoplist[index].products.length
              ) {
                this.shoplist[index].checked = true;
              } else {
                this.shoplist[index].checked = false;
              }
            } else {
              this.priceAll =
                (this.priceAll * 1 - i.mprice * 1).toFixed(2);
            }
            this.changetotal();
            Toast.clear();
          } else {
            Notify({
              type: "danger",
              message: res.data.msg,
            });
          }
        });
    },
    btong () {

      for (let index = 0; index < this.shoplist.length; index++) {
        if (this.shoplist[index].result.length != 0) {
          this.resultsumbit = [
            ...this.resultsumbit,
            ...this.shoplist[index].result,
          ];
        }
      }

      if (this.resultsumbit.length) {

        if (this.type) {
          this.$axios
            .post(this.$api.settlement, {
              cart_ids: this.resultsumbit,
            })
            .then((res) => {
              if (res.data.code == 1) {
                var cardid = this.resultsumbit.join(",");
                this.$store.commit('setcart_id', cardid)
                this.$router.push({
                  path: "/settlement",
                  // query: { cart_id: cardid },
                });
              } else {
                Notify({
                  type: "danger",
                  message: res.data.msg,
                });
              }
              this.resultsumbit = [];
            });
        } else {
          Dialog.confirm({
            title: "提示",
            message: "确认删除",
          })
            .then(() => {
              this.$axios
                .post(this.$api.userdelcart, {
                  cart_ids: this.resultsumbit,
                })
                .then((res) => {
                  if (res.data.code == 1) {
                    this.getlist();
                    this.priceAll = 0;
                    this.num = 0;
                  } else {
                    Notify({
                      type: "danger",
                      message: res.data.msg,
                    });
                  }
                  this.resultsumbit = [];
                });
            })
            .catch(() => { });
        }

      } else {
        Toast.fail(
          {
            message: '请先选择商品',
            duration: 1000,
          }

        )
      }

    },
    changetype () {
      this.type = !this.type;
      for (let index = 0; index < this.shoplist.length; index++) {
        this.shoplist[index].result = [];
        this.shoplist[index].checked = false;
      }
      this.priceAll = 0;
      this.num = 0;
      this.getlist();
    },
    changetotal () {
      this.num = 0;
      for (let index = 0; index < this.shoplist.length; index++) {
        this.num = this.num * 1 + this.shoplist[index].result.length;
      }
    },
    goodscheck (index, itema) {
      if (
        this.shoplist[index].result.length ==
        this.shoplist[index].products.length
      ) {
        this.shoplist[index].checked = true;
      } else {
        this.shoplist[index].checked = false;
      }
      if (this.shoplist[index].result.indexOf(itema.cart_id) != "-1") {
        this.priceAll =
          (this.priceAll * 1 + itema.mprice * itema.quantity).toFixed(2);
      } else {
        this.priceAll =
          (this.priceAll * 1 - itema.mprice * itema.quantity).toFixed(2);
      }
      this.changetotal();
    },
    changecheck (indexcheck) {
      if (this.shoplist[indexcheck].checked) {
        for (
          let index = 0;
          index < this.shoplist[indexcheck].products.length;
          index++
        ) {
          if (
            this.shoplist[indexcheck].result.indexOf(
              this.shoplist[indexcheck].products[index].cart_id
            ) == "-1"
          ) {
            this.shoplist[indexcheck].result.push(
              this.shoplist[indexcheck].products[index].cart_id
            );
            this.priceAll =
              (this.priceAll * 1 +
                this.shoplist[indexcheck].products[index]
                  .mprice *
                this.shoplist[indexcheck].products[index]
                  .quantity).toFixed(2);
          }
        }
      } else {
        for (
          let index = 0;
          index < this.shoplist[indexcheck].products.length;
          index++
        ) {
          if (
            this.shoplist[indexcheck].result.indexOf(
              this.shoplist[indexcheck].products[index].cart_id
            ) != "-1"
          ) {
            this.priceAll =
              (
                this.priceAll * 1 -
                this.shoplist[indexcheck].products[index]
                  .mprice *
                1 *
                this.shoplist[indexcheck].products[index]
                  .quantity *
                1
              ).toFixed(2) * 1;
          }
        }
        this.shoplist[indexcheck].result = [];
      }
      this.changetotal();
    },

    getlist () {
      this.$axios
        .get(this.$api.usercartlist, {
          params: {
            page: 1,
          },
        })
        .then((res) => {
          this.total = res.data.data.total;
          this.shoplist = res.data.data.data.map((v) => {
            return {
              ...v,
              checked: false,
              result: [],
            };
          });
        });
    },
  },
};
</script>

<style scoped lang='less'>
img {
  width: 100%;
  height: 100%;
}
.cart {
  padding: 20px 20px 70px;
  position: relative;

  .topfelx {
    display: flex;
    justify-content: space-between;
    .numgoods {
      font-size: 12px;
      color: rgba(6, 2, 26, 0.6);
    }
    .changegoods {
      font-size: 14px;
      color: #06021a;
    }
  }
  .goodsbox {
    margin-top: 20px;
    .goodsone {
      width: calc(100% - 40px);
      padding: 20px;
      border-radius: 10px;
      background: #fff;
      margin-bottom: 20px;
      .goodstop {
        display: flex;
        margin-bottom: 20px;

        .phimg {
          width: 25px;
          height: 25px;
          margin: 0 10px;
          align-self: center;
        }
        .shoptitle {
          width: calc(100% - 77px);
        }
        .righticonlink {
          width: 12px;
          height: 12px;
        }
      }
      .goods {
        display: flex;
        padding: 10px 0;
        border-top: 1px solid #f6f6f6;
        .goodsimg {
          width: 76px;
          height: 76px;
          margin: 0 10px;
          border-radius: 10px;
          position: relative;
          .downbox {
            border-radius: 10px;
            position: absolute;
            top: 0;
            width: 100%;
            background: rgba(96, 96, 96, 0.83);
            color: #fff;
            font-size: 14px;
            line-height: 76px;
            text-align: center;
          }
        }
        .goodsdex {
          width: calc(100% - 116px);
          position: relative;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .goodsname {
            font-size: 14px;
            color: #201d1d;
            overflow: hidden; //溢出内容隐藏
            text-overflow: ellipsis; //文本溢出部分用省略号表示
            display: -webkit-box; //特别显示模式
            -webkit-line-clamp: 2; //行数
            line-clamp: 2;
            -webkit-box-orient: vertical; //盒子中内容竖直排列
          }
          .goodsAttribute {
            font-size: 12px;
            font-family: Microsoft YaHei-Regular, Microsoft YaHei;
            font-weight: 400;
            color: rgba(32, 35, 39, 0.7);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .goodsprice {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .price {
              font-size: 16px;
              color: #ef402b;
            }
          }
        }
      }
      .goods:first-child {
        border-top: 0;
      }
    }
  }
  .paybox {
    position: fixed;
    bottom: 50px;
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);

    left: 0px;
    width: calc(100% - 20px);
    background: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    display: flex;
    justify-content: flex-end;
    padding: 10px;
    .paydes {
      width: calc(100% - 190px);
      margin: 0 10px;
      font-size: 12px;
      position: relative;
      align-self: center;
      .payprice {
        // position: absolute;
        // top: 0;
        width: 100%;
        display: flex;
        justify-content: flex-end;
        .pricenum {
          color: #ef402b;
          font-size: 16px;
          font-weight: 550;
        }
      }
      .payinfo {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        position: absolute;
        bottom: 0;
        color: #ef402b;
      }
    }
  }
}
</style>
